import { Meta, Status, Props, Story } from '../../../../.storybook/components';
import * as Stories from './Table.stories';

<Meta of={Stories} />

# Table

<Status variant="stable" />

Tables allow users to see detailed information in an organized and orderly way, especially when a task revolves around comparing or analyzing the information set.

<Story of={Stories.Base} />

<Props />

## When to use it

To present data sets, such as "subaccounts" or "orders". Tables help users find information that they are looking for faster and if the data can be manipulated it can also be used for analysis.

## Usage guidelines

- **Do** allow filtering and ordering, if possible, to help our users assess the information faster
- **Do** pair the table component with pagination if your data set has more than 24 items
- **Do** provide a unique identifier for each item and place it as the first column from left to right
- **Do not** make an item on the table actionable. If you need this functionality, consider using a listview.

## Content guidelines

- **Do** align the text or values within columns to left
- **Do** provide simple and short headers for each column
- **Do** use sentence case for headers
- **Do not** include units of measurement on the data item, you should place it just on the header

## Usage in code

### Components as rows

While headers and rows can accept strings as children, they can also accept objects.

<Story of={Stories.WithComponentRows} />

### Sorting

When creating a sortable table with the `sortable` prop in the headers object, always provide a `sortLabel` prop for visually impaired users.

#### Default sorting

If the value that you want to sort by can be handled by JavaScript's built-in sorting function (such as strings, numbers, and dates), you can simply provide a machine-readable `sortByValue` for each row that has a corresponding `sortable: true` property in the header.

<Story of={Stories.Sortable} />

#### Custom sorting

To do custom sorting, for instance, locale-sensitive sort, you could implement that using a custom `onSortBy`:

<Story of={Stories.CustomSort} />
